<template>
  <div class="shopping">
    <div class="content">
      <div class="banner">
        <img src="@/assets/user/banner.png" alt="" />
      </div>
      <div class="tab-list">
        <listItem
          :item="item"
          v-for="(item, index) in list"
          :key="index"
          @click="toDetail"
        ></listItem>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import listItem from "@/components/user/list.vue";
import img1 from "@/assets/user/icon/1.png";
import img2 from "@/assets/user/icon/2.png";
import img3 from "@/assets/user/icon/3.png";
import img4 from "@/assets/user/icon/4.png";
import img5 from "@/assets/user/icon/6.png";
import img6 from "@/assets/user/icon/7.png";
import img7 from "@/assets/user/icon/8.png";
import img8 from "@/assets/user/icon/9.png";
import img9 from "@/assets/user/icon/10.png";
import img10 from "@/assets/user/icon/11.png";
import img11 from "@/assets/user/icon/12.png";
import img12 from "@/assets/user/icon/16.png";
import img13 from "@/assets/user/icon/17.png";
const router = useRouter();
let data = reactive({
  list: [
    {
      title: "EV录屏",
      icon: img1,
      desc: "简单易用的录屏软件，支持分屏录制，",
      desc1: "定时录制，声音降噪，GIF动图制作等功能",
      desc2: "",
    },
    {
      title: "EV剪辑",
      icon: img2,
      desc: "支持全格式精准剪辑的视频制作软件，",
      desc1: "可以实现多轨道剪辑、配音、",
      desc2: "水印添加、字幕等功能",
    },
    {
      title: "EV视频转换器",
      icon: img3,
      desc: "支持多种转换格式，同时还提供,",
      desc1: "高清压缩、水印处理、gif制作、",
      desc2: "视频倒放等功能",
    },
    {
      title: "EV录屏三端会员",
      icon: img4,
      desc: "win端+安卓端+iOS端",
      desc1: "",
      desc2: "",
    },
    {
      title: "EV会员组合套餐",
      icon: img4,
      desc: "支持多款产品搭配组合,",
      desc1: "购买尽享更大优惠",
      desc2: "",
    },
    {
      title: "EV投屏",
      icon: img5,
      desc: "安卓苹果手机都适用的,",
      desc1: "超低延迟的手机投屏电脑软件",
      desc2: "",
    },
    {
      title: "EV远程协助",
      icon: img6,
      desc: "支持跨平台、多屏幕远程控制，账号,",
      desc1: "绑定无限制，超高码率超清画质的",
      desc2: "远程工具",
    },
    {
      title: "EV多聊",
      icon: img7,
      desc: "支持多个微信账号同时登录，运行流畅不卡",
      desc1: "顿，支持话术分类管理，简单快捷实用",
      desc2: "",
    },
    {
      title: "EV屏幕共享",
      icon: img8,
      desc: "支持屏幕共享、屏幕监控等",
      desc1: "功能的局域网多人屏幕分享工具",
      desc2: "",
    },
    {
      title: "EV直播助手",
      icon: img9,
      desc: "一款轻量化、流畅、高效的无人直播软件，",
      desc1: "可以实现循环直播、定时推送",
      desc2: "自定义视频区域等功能",
    },
    {
      title: "EV互动",
      icon: img10,
      desc: "局域网视频会议工具",
      desc1: "适合企业内网沟通，保障数据安全",
      desc2: "",
    },
    {
      title: "EV扩展屏",
      icon: img11,
      desc: "让平板/手机变成电脑的第二个屏幕",
      desc1: "多个屏幕多任务处理，提高工作效率",
      desc2: "",
    },
    {
      title: "录+剪(iOS版)",
      icon: img1,
      desc: "iOS手机录屏剪辑压缩实用工具",
      desc1: "",
      desc2: "",
    },
    {
      title: "录+剪(安卓版)",
      icon: img1,
      desc: "安卓手机录屏剪辑实用工具",
      desc1: "",
      desc2: "",
    },
    {
      title: "EV直播助手(安卓版)",
      icon: img9,
      desc: "手机端虚拟直播间搭建软件",
      desc1: "支持无绿幕抠图等",
      desc2: "",
    },
    {
      title: "EV虚拟摄像头",
      icon: img12,
      desc: "让手机秒变电脑高清摄像头和麦克风",
      desc1: "支持android、iOS手机",
      desc2: "",
    },
    {
      title: "EV云加密",
      icon: img13,
      desc: "一站式管理的视频加密授权软件",
      desc1: "",
      desc2: "",
    },
  ],
});
let { list } = toRefs(data);

function toDetail() {
  router.push("/user/personalPay");
}
</script>

<style lang="less">
.shopping {
  .content {
    width: 1200px;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 0;
    .banner {
      width: 100%;
      margin-bottom: 20px;
      img {
        width: 100%;
      }
    }
    .tab-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }
}
</style>
